<template>
  <div class="file-type-icon" :class="iconClass">
    <img v-if="iconSrc" :src="iconSrc" :alt="fileType" class="svg-icon" />
    <el-icon v-else class="fallback-icon">
      <Document v-if="fileType === 'document'" />
      <Folder v-else-if="fileType === 'directory'" />
      <Picture v-else-if="fileType === 'image'" />
      <VideoPlay v-else-if="fileType === 'video'" />
      <Headset v-else-if="fileType === 'audio'" />
      <Files v-else-if="fileType === 'archive'" />
      <Memo v-else-if="fileType === 'markdown'" />
      <Link v-else-if="fileType === 'html'" />
      <PieChart v-else-if="fileType === 'presentation'" />
      <Grid v-else-if="fileType === 'spreadsheet'" />
      <Document v-else />
    </el-icon>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue';
import { 
  Folder, Document, Memo, Picture, VideoPlay, 
  Files, Headset, Link, PieChart, Grid
} from '@element-plus/icons-vue';

// 导入所有SVG图标
const iconModules = import.meta.glob('../../assets/icons/filetype/*.svg', { eager: true });

const props = defineProps({
  fileType: {
    type: String,
    required: true
  },
  fileName: {
    type: String,
    default: ''
  },
  size: {
    type: String,
    default: 'medium' // small, medium, large
  }
});

// 图标类名
const iconClass = computed(() => {
  return {
    [`icon-${props.fileType}`]: true,
    [`size-${props.size}`]: true
  };
});

// 获取图标路径
const iconSrc = computed(() => {
  // 根据文件类型和扩展名确定使用哪个图标
  const extension = props.fileName ? props.fileName.split('.').pop().toLowerCase() : '';
  
  // 尝试按扩展名匹配
  if (extension) {
    // 检查是否有对应扩展名的图标
    const extensionPath = `../../assets/icons/filetype/${extension}.svg`;
    if (iconModules[extensionPath]) {
      return iconModules[extensionPath].default;
    }
  }
  
  // 根据文件类型匹配
  switch (props.fileType) {
    case 'directory':
      return iconModules['../../assets/icons/filetype/folder.svg']?.default;
    case 'document':
      return iconModules['../../assets/icons/filetype/word.svg']?.default;
    case 'markdown':
      return iconModules['../../assets/icons/filetype/txt.svg']?.default;
    case 'image':
      return iconModules['../../assets/icons/filetype/JPG.svg']?.default;
    case 'video':
      return iconModules['../../assets/icons/filetype/video.svg']?.default;
    case 'audio':
      return iconModules['../../assets/icons/filetype/audio.svg']?.default;
    case 'archive':
      return iconModules['../../assets/icons/filetype/zip.svg']?.default;
    case 'html':
      return iconModules['../../assets/icons/filetype/HTML.svg']?.default;
    case 'presentation':
      return iconModules['../../assets/icons/filetype/PPT.svg']?.default;
    case 'spreadsheet':
      return iconModules['../../assets/icons/filetype/excel.svg']?.default;
    case 'text':
      return iconModules['../../assets/icons/filetype/txt.svg']?.default;
    case 'pdf':
      return iconModules['../../assets/icons/filetype/PDF.svg']?.default;
    case 'word':
      return iconModules['../../assets/icons/filetype/word.svg']?.default;
    case 'excel':
      return iconModules['../../assets/icons/filetype/excel.svg']?.default;
    case 'ppt':
      return iconModules['../../assets/icons/filetype/PPT.svg']?.default;
    default:
      return iconModules['../../assets/icons/filetype/未知文件.svg']?.default;
  }
});
</script>

<style scoped>
.file-type-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

.svg-icon {
  object-fit: contain;
}

.size-small .svg-icon {
  width: 24px;
  height: 24px;
}

.size-medium .svg-icon {
  width: 48px;
  height: 48px;
}

.size-large .svg-icon {
  width: 64px;
  height: 64px;
}

.fallback-icon {
  font-size: 24px;
}

.size-small .fallback-icon {
  font-size: 18px;
}

.size-medium .fallback-icon {
  font-size: 32px;
}

.size-large .fallback-icon {
  font-size: 48px;
}

/* 图标颜色 */
.icon-directory .fallback-icon {
  color: #f59e0b;
}

.icon-document .fallback-icon {
  color: #3b82f6;
}

.icon-markdown .fallback-icon {
  color: #10b981;
}

.icon-html .fallback-icon {
  color: #ec4899;
}

.icon-presentation .fallback-icon {
  color: #f97316;
}

.icon-spreadsheet .fallback-icon {
  color: #22c55e;
}

.icon-image .fallback-icon {
  color: #8b5cf6;
}

.icon-video .fallback-icon {
  color: #ef4444;
}

.icon-audio .fallback-icon {
  color: #06b6d4;
}

.icon-archive .fallback-icon {
  color: #6b7280;
}
</style> 